<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/23
  Time: 11:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户权限管理</title>
    <%@include file="../../common/head.jsp" %>
</head>
<body>
<div id="wrapper">
    <%@include file="../../common/navi.jsp" %>

    <%--    <这里是中间主体>--%>
    <div id="page-wrapper" class="gray-bg dashbard-1">

        <%@include file="../../common/row_head.jsp" %>

        <%--        <可更改地区>--%>
        <%--            <上面的分块 建议不要改div class中的东西>--%>
        <div class="row  border-bottom white-bg dashboard-header">
            <div class="col-sm-3">
                <h2>用户管理</h2>
            </div>
        </div>

        <%--        模态框状态控制+删除--%>
        <div class="modal fade" id="statusmode" tabindex="-1" role="dialog" aria-labelledby="myModalcon"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalcon"></h4>
                    </div>
                    <div class="modal-body">
                        <form id="statusconf">
                            <div class="form-group">
                                <input type="hidden" class="form-control" id="statuscid" name="statuscid" required=""
                                       value="">
                            </div>
                            <div class="form-group">
                                <input type="hidden" class="form-control" id="statusvild" name="statusvild" required=""
                                       value="">
                            </div>
                            <div class="form-group">
                                <div id="divestus"></div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >关闭
                        </button>
                        <button type="button" class="btn btn-danger" onclick="change()">修改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <%--模态框添加--%>
        <div class="modal fade" id="addumode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                    </div>
                    <div class="modal-body">
                        <form id="adduser">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" class="form-control" id="username" name="username" placeholder="用户名"
                                       required="">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password" name="password"
                                       placeholder="密码" required="">
                            </div>
                            <div class="form-group">
                                <label for="role">角色</label>
                                <select class="form-control" id="role" name="role">
                                    <option value="0">管理员</option>
                                    <option value="1">第三方</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="active">激活</label>
                                <select class="form-control" id="active" name="active">
                                    <option value="0">有效</option>
                                    <option value="1">无效</option>
                                </select>
                            </div>
                            <label >菜单管理</label>
                            <div class="form-group" id="menu">
                                <label class="checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox1" value="option1" checked> 1
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                                </label>

                            </div>


                            <button type="button" class="btn btn-danger" onclick="adduser()">添加</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <%--模态框修改--%>
        <div class="modal fade" id="editumode" tabindex="-1" role="dialog" aria-labelledby="myModalLabeled"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabeled">修改用户</h4>
                    </div>
                    <div class="modal-body">
                        <form id="edituser">
                            <div class="form-group">
                                <input type="hidden" class="form-control" id="ide" name="ide" placeholder="id" value="" required="">
                            </div>
                            <div class="form-group">
                                <label for="usernamee">用户名</label>
                                <input type="text" class="form-control" id="usernamee" name="usernamee" placeholder="用户名"
                                       required="">
                            </div>
                            <div class="form-group">
                                <label for="rolee">角色</label>
                                <select class="form-control" id="rolee" name="rolee">
                                    <option value="0">管理员</option>
                                    <option value="1">第三方</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="activee">激活</label>
                                <select class="form-control" id="activee" name="activee">
                                    <option value="0">有效</option>
                                    <option value="1">无效</option>
                                </select>
                            </div>
                            <label >菜单管理</label>
                            <div class="form-group" id="menue">
                                <label class="checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox1e" value="option1" checked> 1
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox2e" value="option2"> 2
                                </label>
                            </div>
                            <button type="button" class="btn btn-danger" onclick="editu()">添加</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"  onclick="clearChioce()">关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <div class="modal fade" id="changePwdModal" tabindex="-1" role="dialog" aria-labelledby="myModalconPwd"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalconPwd"></h4>
                    </div>
                    <div class="modal-body">
                        <form id="changePwdForm">
                            <div class="form-group">
                                <input type="hidden" class="form-control" id="changePwdid" name="changePwdid" required=""
                                       value="">
                            </div>
                            <div class="form-group">
                                <div id="divChangePwd"></div>
                            </div>
                    <div class="form-group">
                        <label for="pwdNewchange">新密码</label>
                        <input type="password" class="form-control" id="pwdNewchange" name="pwdNewchange" placeholder="新密码"
                               required="">
                    </div>
                    <div class="form-group">
                        <label for="pwdNewCofchange">确认密码</label>
                        <input type="password" class="form-control" id="pwdNewCofchange" name="pwdNewCofchange" placeholder="确认密码"
                               required="">
                    </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >关闭
                        </button>
                        <button type="button" class="btn btn-danger" onclick="changePwd()">修改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>



        <%--                <下面的分块 建议不要改div class中的东西>--%>
        <div class="row">
            <div class="col-lg-12">
                <div class="wrapper wrapper-content ">
                    <div class="ibox float-e-margins fadeInDown animated">
                        <div class="ibox-title">
                            <h5>用户管理</h5>
                 <%@include file="../../common/iboxtool.jsp"%>

                        </div>
                        <div class="ibox-content">
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addumode">
                                添加用户
                            </button>
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <table class="table table-hover table-bordered">
                                        <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>用户名</th>
                                            <th>角色</th>
                                            <th>创建时间</th>
                                            <th>最后登录时间</th>
                                            <th>启用</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="t_body">
                                        <tr>
                                            <td>1</td>
                                            <td>TB - Monthly</td>
                                            <td>01/04/2012</td>
                                            <td>Default</td>
                                            <td>Default</td>
                                            <td>Default</td>
                                            <td>Default</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <%@include file="../../common/foot.jsp" %>

    </div>

</div>


<%--自带方法--%>
<script>
    $(document).ready(function () {
            query();
            getMenu();
            setTimeout(function () {
                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    showMethod: 'slideDown',
                    timeOut: 4000
                };
                toastr.success('欢迎来到用户权限管理', '欢迎来到神舟-鸿蒙后台系统');
            }, 1300);

            var data1 = [
                [0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
            ];
            var data2 = [
                [0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
            ];
            $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
                    data1, data2
                ],
                {
                    series: {
                        lines: {
                            show: false,
                            fill: true
                        },
                        splines: {
                            show: true,
                            tension: 0.4,
                            lineWidth: 1,
                            fill: 0.4
                        },
                        points: {
                            radius: 0,
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#d5d5d5",
                        borderWidth: 1,
                        color: '#d5d5d5'
                    },
                    colors: ["#1ab394", "#1C84C6"],
                    xaxis: {},
                    yaxis: {
                        ticks: 4
                    },
                    tooltip: false
                }
            );

            var doughnutData = [
                {
                    value: 300,
                    color: "#a3e1d4",
                    highlight: "#1ab394",
                    label: "App"
                },
                {
                    value: 50,
                    color: "#dedede",
                    highlight: "#1ab394",
                    label: "Software"
                },
                {
                    value: 100,
                    color: "#A4CEE8",
                    highlight: "#1ab394",
                    label: "Laptop"
                }
            ];

            var doughnutOptions = {
                segmentShowStroke: true,
                segmentStrokeColor: "#fff",
                segmentStrokeWidth: 2,
                percentageInnerCutout: 45, // This is 0 for Pie charts
                animationSteps: 100,
                animationEasing: "easeOutBounce",
                animateRotate: true,
                animateScale: false
            };

            // var ctx = document.getElementById("doughnutChart").getContext("2d");
            var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);

            var polarData = [
                {
                    value: 300,
                    color: "#a3e1d4",
                    highlight: "#1ab394",
                    label: "App"
                },
                {
                    value: 140,
                    color: "#dedede",
                    highlight: "#1ab394",
                    label: "Software"
                },
                {
                    value: 200,
                    color: "#A4CEE8",
                    highlight: "#1ab394",
                    label: "Laptop"
                }
            ];

            var polarOptions = {
                scaleShowLabelBackdrop: true,
                scaleBackdropColor: "rgba(255,255,255,0.75)",
                scaleBeginAtZero: true,
                scaleBackdropPaddingY: 1,
                scaleBackdropPaddingX: 1,
                scaleShowLine: true,
                segmentShowStroke: true,
                segmentStrokeColor: "#fff",
                segmentStrokeWidth: 2,
                animationSteps: 100,
                animationEasing: "easeOutBounce",
                animateRotate: true,
                animateScale: false
            };
            var ctx = document.getElementById("polarChart").getContext("2d");
            var Polarchart = new Chart(ctx).PolarArea(polarData, polarOptions);

        }
    );

</script>
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-4625583-2', 'webapplayers.com');
    ga('send', 'pageview');

</script>

<%--查询等控制方法--%>
<script>
    function query() {
        $.post("user/mana", {}, function (data) {
            $("#t_body").empty();
            console.log(data);
            $.each(data, function (i, o) {
                var html = "<tr>";
                html += "<td>" + o.id + "</td>";
                html += "<td>" + o.name + "</td>";
                //0文本 1图片 2视频
                var roleName = "管理员";
                if (o.role == 1) {
                    roleName = "第三方";
                }
                html += "<td>" + roleName + "</td>";

                html += "<td>" + timestampToTime(o.createTime) + "</td>";
                html += "<td>" + timestampToTime(o.lastLoginTime) + "</td>";
                if (o.vlid == 0) {
                    html += "<td><button type='button' class='btn btn-Success'  value=" + o.id +
                        " onclick='editstuats(this.value,&quot;" + o.name + "&quot;,&quot;" + o.vlid + "&quot;)'" + ">有效</button></td>";
                }
                if (o.vlid == 1) {
                    html += "<td><button type='button' class='btn btn-warning'  value=" + o.id +
                        " onclick='editstuats(this.value,&quot;" + o.name + "&quot;,&quot;" + o.vlid + "&quot;)'" + ">无效</button></td>";
                }
                html += "<td><button type='button' class='btn btn-default'  value=" + o.id +
                    " onclick= 'edit(this.value)'" + ">修改</button>&nbsp;" +
                    "<button type='button' class='btn btn-danger' value=" + o.id +
                    " onclick='delu(this.value,&quot;" + o.name + "&quot;)'" + ">删除</button>&nbsp;" +
                    "<button type='button' class='btn btn-info' value=" + o.id +
                    " onclick='pwdChange(this.value,&quot;" + o.name + "&quot;)'" + ">修改密码</button></td>"
                html += "</tr>";
                $("#t_body").append(html);
            })
        }, "json")
    }

    function timestampToTime(timestamp) {
        ///Date(1514736000000)/
        var date = new Date(timestamp * 1);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }

    function change() {
        $.post("user/change", {
            id: $("#statuscid").val(),
            vlid: $("#statusvild").val()
        }, function (data) {
            if (data == 2) {
                swal('操作失败', "用户不存在", 'error');
            }
            if (data == 1) {
                swal('成功', "操作成功，请刷新页面", 'success');
                query();
                if ($("#statuscid").val()==${user.id}+"c"||$("#statuscid").val()==${user.id}+"d")
                {   setTimeout(function () {
                    window.location.href = "logout"
                }, 1000);}
            }
            if (data == 3) {
                swal('操作失败', "服务器失效，请联系管理员", 'error');
            }
        }, "json")
    }

    function changePwd(){
        console.log(1);
        $.post("user/changeP", {
            "uid":$("#changePwdid").val(),
            "pwdNew":$("#pwdNewchange").val(),
           "pwdNewCof":$("#pwdNewCofchange").val()
        }, function (data) {
            console.log(data);
            if (data == 1) {
                swal('输入有误', "新密码或旧密码未输入", 'error');
            }
            if (data == 2) {
                swal('输入有误', "两次输入密码不符", 'error');
            }
            if (data == 3) {
                swal('成功', "修改成功", 'success');
                if ($("#changePwdid").val()==${user.id})
                {   setTimeout(function () {
                    window.location.href = "logout"
                }, 1000);}
            }
            if (data == 4) {
                swal('出错了', "密码修改失败，请稍后再试", 'error');
            }
        })
    }


    function getMenu(){

        $.post("menu/queryAll",{},function (data){
            console.log(data)
            $("#menu").empty();
            $("#menue").empty();
            var list=data;
            console.log(list)
            $.each(data,function (i, menuPage) {
            if (menuPage.pid==0){
                var h1="<label class='checkbox-inline'> <input type='checkbox' id="+menuPage.id+" value="+menuPage.id+" onclick='ChkAllClick("+menuPage.id+","+menuPage.id+" )'> "+menuPage.name+":</label>";

                var h2="<label class='checkbox-inline'> <input type='checkbox' id="+menuPage.id+menuPage.name+" value="+menuPage.id+" onclick='ChkAllClick(&quot;"+menuPage.id+menuPage.name+"&quot;,&quot;"+menuPage.id+menuPage.name+"&quot; )'> "+menuPage.name+":</label>";


                $.each(list,function (i,menuSon){
                    if (menuSon.pid==menuPage.id){
                        h1+="<label class='checkbox-inline'> <input type='checkbox' name="+menuPage.id+" id="+menuSon.id+" value="+menuSon.id+" onclick='ChkSonClick("+menuPage.id+","+menuSon.id+","+menuPage.id+")'> "+menuSon.name+"</label>";
                        h2+="<label class='checkbox-inline'> <input type='checkbox' name="+menuPage.id+menuPage.name+" id='"+menuSon.id+menuSon.name+"' value="+menuSon.id+" onclick='ChkSonClick(&quot;"+menuPage.id+menuPage.name+"&quot;,&quot;"+menuSon.id+menuSon.name+"&quot;,&quot;"+menuPage.id+menuPage.name+"&quot;)'> "+menuSon.name+"</label>";  }
                } )
                h1+="<br>"
                h2+="<br>"
                $("#menu").append(h1);
                $("#menue").append(h2);
            }

            })
        },"json")
    }


    function adduser() {
        var d = "user/add?" + $("#adduser").serialize();
        var list=[];
        $("#adduser").find(":checkbox:checked").each(function(){
            var val = $(this).parents(".checkbox-inline").children().val();
            list.push(val);})
        console.log(d);
        console.log(list);
        $.ajax({
            url:d,//地址
            type:"post",//请求类型
            data:{
                "list":list,
            }, //请求的参数 常用json格式
            traditional:true,
        dataType:"json",
            //返回数据的类型
            success:function(data) {//响应成功时的回调函数 data表示返回的数据
                console.log(data);
                if (data == 2) {
                            swal('创建有误', "用户名或密码未输入", 'error');
                        }
                        if (data == 1) {
                            swal('成功', "添加用户成功，请刷新页面", 'success');
                            query();
                        }
                        if (data == 3) {
                            swal('添加失败', "请联系管理员或重试", 'error');
                        }
                        if (data == 4) {
                            swal('添加失败', "用户已存在", 'error')
            }}
    })}


</script>

<%--模态框控制--%>
<script>
    function editstuats(value, name, vild) {
        console.log(value);
        $('#statusmode').modal('show');
        $("#statuscid").val(value + "c");
        $("#divestus").html("您确定要修改" + name + "的状态吗");
        $("#statusvild").val(vild);
        $("#myModalcon").html("状态修改确认");
    }

    function edit(value) {
        console.log(value);
        $("#ide").val(value);
        editByIdG(value);
        $('#editumode').modal('show');
    }

    function editByIdG(value){
        var confirm;
        if (value==${user.id}){
            confirm="true";
        }else{ confirm="false"}
        $.post("user/editByIdGet",{"id":value,
        "conf":confirm
        },function (data){
            console.log(data)
            if (data==2){
                swal('操作失败', "用户不存在", 'error');
                query();
            }else{
                $("#usernamee").val(data.user.name);
                $("#rolee").val(data.user.role);
                $("#activee").val(data.user.vlid);
                $.each(data.menu,function (i,me){
                    var id=me.id+me.name;
                    console.log(id)
                    var mid=document.getElementById(id);
                    console.log(mid)
                    mid.checked = true;
                })
            }

        },"json")
    }

  function  pwdChange(value,name){
      console.log(value);
      console.log(name);
      $("#changePwdid").val(value);
      $("#divChangePwd").html("正在修改" + name + "的密码");
      $('#changePwdModal').modal('show');
  }

    function delu(value, name) {
        console.log(value);
        $('#statusmode').modal('show');
        $("#statuscid").val(value + "d");
        $("#divestus").html("您确定要删除" + name + "吗");
        $("#myModalcon").html("删除确认");

    }

</script>


<script>
    function ChkAllClick(sonName, cbAllId)
    {console.log("a")
        var arrSon = document.getElementsByName(sonName);
        var cbAll = document.getElementById(cbAllId);
        var tempState = cbAll.checked;

        for (i = 0; i < arrSon.length; i++)
        {
            if (arrSon[i].checked != tempState)
                arrSon[i].click();
        }
    }

    // --子项复选框被单击---
    function ChkSonClick(sonName, clickson, cbAllId)
    {console.log("a")
        var arrSon = document.getElementsByName(sonName);
        var ckSon = document.getElementById(clickson);
        var cbAll = document.getElementById(cbAllId);
        //子选项选中则列头全选框被选中 否则执行其他。
        if (ckSon.checked == true)
        {
            cbAll.checked = true;
        }}
</script>
<script>

  function  clearChioce(){
      $("#editumode").find(":checkbox:checked").each(function(){
          var val = $(this).parents(".checkbox-inline").children().context;
          val.checked=false;
          console.log(val)
  })}

   function editu(){
       var d = "user/edit?" + $("#edituser").serialize();
       var list=[];
       $("#editumode").find(":checkbox:checked").each(function(){
           var val = $(this).parents(".checkbox-inline").children().val();
           list.push(val);})
       $.ajax({
           url:d,//地址
           type:"post",//请求类型
           data:{
               "list":list,
           }, //请求的参数 常用json格式
           traditional:true,
           dataType:"json",
           //返回数据的类型
           success:function(data) {//响应成功时的回调函数 data表示返回的数据
               console.log(data);
               if (data == 2) {
                   swal('修改错误', "用户名未输入", 'error');
               }
               if (data == 1) {
                   swal('成功', "修改用户成功，请刷新页面", 'success');
                   query();
                   if ($("#ide").val()==${user.id})
                   {   setTimeout(function () {
                       window.location.href = "logout"
                   }, 1000);}
               }
               if (data == 3) {
                   swal('修改失败', "请联系管理员或重试", 'error');
               }
               if (data == 4) {
                   swal('修改失败', "用户不存在", 'error')
               }   if (data == 5) {
                   swal('修改失败', "用户名已存在", 'error')
               }}
       })
   }
</script>
</body>
</html>
